import React from 'react';
import { Typography } from 'antd';
import styles from './index.less';

const { Paragraph } = Typography;
const InterviewQuestionMobile = props => {
    const { list, rows = 1 } = props;
    return (
        <>
            {list &&
                list.length > 0 &&
                list.map(item =>
                    item.isMore ? (
                        <div className={styles.questionDiv} key={item.id || item.key}>
                            <span className={styles.headerTitle} style={{ display: 'block', flexShrink: 0, ...item.keyStyle }}>
                                {item.key}
                            </span>
                            <Paragraph ellipsis={{ rows, expandable: true }} style={{ flex: 1, ...item.valStyle }}>
                                {item?.value}
                            </Paragraph>
                        </div>
                    ) : (
                        <div className={styles.job} key={item.key}>
                            <span className={styles.headerTitle} style={{ display: 'block', ...item.keyStyle }}>
                                {item.key}
                            </span>
                            <span className={styles.headerJob} style={{ flex: 1, ...item.valStyle }}>
                                {item?.value}
                            </span>
                        </div>
                    )
                )}

            {/* <div className={styles.line}></div> */}
        </>
    );
};
export default InterviewQuestionMobile;
